<template>
  <div class="songListRecommend w">
    <GlobalTitle title="歌单推荐" @titleClick="toCategoryPage" />
    <div class="content" v-if="GedanList.length === 0">
      <el-skeleton animated class="content_item" v-for="item in 10" :key="item">
        <template slot="template">
          <el-skeleton-item variant="image" style="height: 224px" />
          <el-skeleton-item variant="p" style="height: 22px; margin-top: 5px" />
        </template>
      </el-skeleton>
    </div>

    <!-- 主体内容 -->
    <el-carousel
      v-else
      trigger="hover"
      indicator-position="outside"
      :interval="4000"
      arrow="never"
    >
      <el-carousel-item v-for="itemBox in 10" :key="itemBox">
        <div class="content">
          <div
            class="content_item"
            v-for="item in GedanList.slice((itemBox - 1) * 10, itemBox * 10)"
            :key="item.id"
          >
            <div class="content_item_img">
              <!-- 只是设置了 content_item_img 这个类的 宽度和高度 以及 里面的 图片 百分百显示 -->
              <!-- <img :src="item.picUrl" :alt="item.name" /> -->
              <el-image :src="item.picUrl">
                <div slot="error" class="imageError">
                  <!-- <img src="https://z3.ax1x.com/2021/11/19/Ib4IVs.png" /> -->
                  <img :src="$constant.ImgError" />
                </div>
                <div slot="placeholder">
                  <!-- <img src="https://z3.ax1x.com/2021/11/16/IRL9rq.png" /> -->
                  <img :src="$constant.ImgNowLoading" />
                </div>
              </el-image>

              <!-- 播放按钮 -->
              <div class="play" @click="toCategoryDetailsPages(item.id)"></div>

              <!-- 播放量 -->
              <div class="playCount">
                <i
                  class="iconfont icon-erji"
                  style="color: #ffffff; font-size: 12px; margin-right: 5px"
                ></i>
                {{ getCount(item.playCount) }}
              </div>
            </div>
            <p class="one_txt_cut">{{ item.name }}</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <br />
  </div>
</template>

<script>
import { getTuijianGedan } from "../../../../../api/homeApi";
import { getCount } from "../../../../../utils/format";
export default {
  name: "songListRecommend",
  components: {},
  data() {
    return {
      GedanList: [],
    };
  },
  created() {
    this.getTuijianGedan();
  },
  methods: {
    // 工具函数
    getCount,
    async getTuijianGedan() {
      try {
        const result = await getTuijianGedan(100);
        if (result.code === 200) {
          // console.log("接口调用成功", result);
          this.GedanList = result.result;
        }
      } catch (error) {}
    },
    toCategoryDetailsPages(id) {
      this.$router.push(`/categoryDetails/${id}`);
    },
    toCategoryPage() {
      console.log("点击~~~~~~~~~~~~~~~");
      this.$router.push("/category");
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
/deep/ .el-carousel__container {
  height: 550px;
}
.songListRecommend {
  .content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    // height: 470px;
    .content_item {
      width: 224px;
      height: 270px;
      padding-bottom: 10px;
      // background-color: #ccc;
      margin-bottom: 10px;
      &:nth-child(n + 6) {
        margin-bottom: 0;
      }
      // 鼠标移动到子项 图片做放大动画
      &:hover {
        cursor: pointer;
        .content_item_img img {
          transform: scale(1.3);
        }
        .content_item_img .play {
          display: block;
        }
      }
      // 图片
      .content_item_img {
        position: relative;
        width: 224px;
        height: 224px;
        border-radius: 15px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;

          transition: all 0.5s;
        }
        .play {
          display: none;
          // display: block;
          position: absolute;
          border-radius: 50%;
          top: 50%;
          left: 50%;
          width: 64px;
          height: 64px;
          transform: translate(-50%, -50%);
          background: url("../../../../../assets/images/btn-play.png");
          animation: pulse 2s infinite;
        }
        .playCount {
          position: absolute;
          top: 6px;
          right: 5px;
          height: 24px;
          line-height: 24px;
          padding: 0 8px;
          font-size: 12px;
          border-radius: 12px;
          background: rgba(0, 0, 0, 0.4);
          color: #ffffff;
        }
      }
      // 名字
      p {
        margin-top: 15px;
        height: 22px;
        color: #666;
        font-size: 14px;
        &:hover {
          color: @globalColor;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
